<template>
  <div class="container-app">
    <div class="header-swiper">
        <div class="context" @click="btnDetaileSvg(index)" v-for="(ele,index) in list" :key="index">
          <div class="img">
            <img :src="ele.img" alt=""/>
          </div>
          <span>{{ ele.name}}</span>
        </div>
    </div>
  </div>
</template>

<script>
import v1 from '@/assets/commont/movie.png'
import v2 from '@/assets/commont/城堡.png'
import v3 from '@/assets/commont/粉丝星球.png'
import v4 from '@/assets/commont/钱.png'
import v5 from '@/assets/commont/话筒.png'
export default {
  name: 'CenterPage',
  data () {
    return {
      list: [
        { name: '电影', img: v1 },
        { name: '爱艺之城', img: v2 },
        { name: '电影包场', img: v3 },
        { name: '政府补贴', img: v4 },
        { name: '演唱会', img: v5 }
      ]
    }
  },
  methods: {
    btnDetaileSvg (index) {
      if (index === 0) {
        this.$router.push('/movie')
        return
      }
      this.$toast({
        message: '抱歉，当前功能开发中',
        icon: 'like-o',
        duration: 800
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container-app{
  padding: 1vw 0;
  background-color: #fff;
  border-radius: 3vw;
  margin-top: 1vw;
}
.header-swiper{
  display: flex;
  justify-content: space-between;
  .context{
    width: 15vw;
    height: 12vh;
    .img{
      width: 100%;
      height: 75%;
      // background-color: pink;
      img{
        width: 100%;
        height: 100%;
      }
    }
    span{
      display: inline-block;
      width: 100%;
      text-align: center;
      font-size: 3.6vw;
      color: #333;
    }
  }
}
</style>
